<template>
  <div class="box-outer" @touchmove="onMove1">
    <div class="box-wrap" @touchmove="onMove2">
      <div class="box" @touchmove="onMove3">
        <div class="box-inner">
          {{ 1 + 1 }}
        </div>
      </div>
    </div>
  </div>
  <div>
    <button @click="add">添加</button>
  </div>
</template>
<script>
import gsap from '../../libs/gsap-3.11.1.min.js'
import Favico from 'favico.js'
export default {
  data() {
    return {}
  },
  methods: {
    onMove1() {
      console.log(`move1`)
    },
    onMove2() {
      console.log(`move2`)
    },
    onMove3() {
      console.log(`move3`)
    },
    add() {
      var favicon = new Favico({
        animation: 'none',
        dataUrl: (url) => {
          console.log(url)
        }
      })

      favicon.badge(1)
      console.log(`helloworld`)
      gsap.to('.box', 1, {
        x: 100,
        y: 100
      })

      //10 -> 100
      //100 -> 200
      //
      //110,90
      //90 -> 40 //自己
      //90 -> 50 //
    }
  }
}
</script>
<style type="text/css" lang="scss">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  touch-action: auto;
  overflow-y: auto;
  &-wrap {
    touch-action: none;
    padding: 20px;
    background: grey;
    height: 200vh;
  }
  &-outer {
    touch-action: none;
    padding: 20px;
    background: #ff000033;
  }
  &-inner {
    height: 100vh;
  }
}
</style>
